<template>
  <div class="hello">
    <div class="icons">
      <UIcon name="go"/>
      <UIcon name="search" />
      <UIcon class-name="bug-icon" name="bug" @click="test"/>  
      <UIcon name="zip" />  
      <UIcon name="email" @click="clickEmail"/>  
      <UIcon name="form" /> 
      <UIcon :name="icon" />  
      <UIcon :name="dragIcon" />  
      <UIcon name="404" /> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      icon: 'list',
      dragIcon: 'drag'
    };
  },
  methods: {
    test(){
      alert(1)
    },
    clickEmail(){
      alert('email')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// @import 'iconfont/iconfont';

// .test {
//  @include webfont-icon('go', 'before', 'middle', '16px', 'bold', 'italic')
// }

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.icons {
  margin: 20px;
  height: 85px;
  text-align: center;
  width: 400px;
  float: left;
  font-size: 30px;
  color: #24292e;
  cursor: pointer;
}

.bug-icon {
  font-size: 3em;
  color: #d74811;
}
</style>
